<template>
  <div
    class="works"
    :class="{ workActive: ticketSelect.ticket_id == workData.ticket_id }"
  >
    <div class="work_left">
      <!-- 图片 -->
      <div class="work_left_img">
        <div v-if="!!workData.thumbnail" class="workImg">
          <img :src="urlAddToken(workData.thumbnail)" alt="" />
        </div>
        <div v-else class="workText">
          <span>{{ workData || workData.state | imgTextFilter }}</span>
        </div>
      </div>
      <!-- 图片备注 -->
      <div class="work_left_text">
        <div class="work_left_text_left">
          <span>
            <svg-icon class="distance_svg_icon" icon-class="tag" />标记:{{
              workData.mark_count
            }}
          </span>
        </div>
        <div class="work_left_text_right">
          <span>
            <svg-icon
              class="distance_svg_icon"
              icon-class="viewPhotos"
            />照片:{{ workData.photo_count }}
          </span>
        </div>
      </div>
      <!-- <el-popover
        placement="left-start"
        v-model="ifDelWork"
        @after-enter="showPopover"
        :ref="`${workData.airline_code}`"
        v-if="workData.state == '待审核'"
      >
        <div>确定删除当前任务吗?</div>
        <div>
          <el-button type="primary" size="mini" @click="ifDelWork = false">
            取消
          </el-button>
          <el-button type="danger" size="mini" @click="delWork">
            删除
          </el-button>
        </div>
        <div class="work_left_del" @click.stop="" slot="reference">
          <div class="background"></div>
          <div class="text">
            <i class="el-icon-delete"></i>
          </div>
        </div>
      </el-popover> -->
    </div>

    <div class="work_right">
      <div class="work_right_title">
        <!-- <div>{{ workData.aim }}</div> -->
        <el-tooltip
          class="item"
          effect="dark"
          :content="workData.ticket_name || workData.aim"
          placement="bottom"
          :open-delay="400"
        >
          <div class="title_name">
            {{ workData | ticketNameFilter }}
          </div>
        </el-tooltip>

        <el-tooltip
          class="item"
          effect="dark"
          :content="workData.operate_msg"
          :disabled="!workData.operate_msg"
          placement="bottom-end"
          :open-delay="400"
        >
          <div class="title_tag" :class="workData.state | statusFilter">
            {{ workData.state || "未知" }}
          </div>
        </el-tooltip>
      </div>
      <hr />
      <div class="work_right_body">
        <div class="work_text">
          <span>提交时间: {{ workData.submit_time | timeFilter }}</span>
        </div>
        <div class="work_text">
          <span> 执行时间: {{ workData.execute_time | timeFilter }}</span>
        </div>
        <el-tooltip
          class="item"
          effect="dark"
          :content="workData.airline_name"
          placement="bottom"
          :open-delay="400"
        >
          <div class="work_text">
            <!-- <span> 巡检航线:{{ workData.airline_name }}</span> -->
            <span> 巡检用途:{{ workData.aim }}</span>
          </div>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          :content="'' + workData.address"
          placement="bottom"
          :open-delay="400"
        >
          <div class="work_text">
            <span> 地<b></b>点: {{ workData.address }}</span>
          </div>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { delTicket } from "@/api/view5";
import { addUrlToken } from "@/utils/allTool";
export default {
  name: "works",
  filters: {
    ticketNameFilter(data) {
      if (data.ticket_name) {
        return data.ticket_name.split("】")[1];
      } else {
        return data.aim;
      }
    },
    // 状态颜色过滤器
    statusFilter(color) {
      switch (color) {
        case "待审核":
          return "gray";
        case "审核中":
          return "blue";
        case "待执行":
          return "yellow";
        case "执行中":
          return "green";
        case "已挂起":
          return "orange";
        case "执行终止":
          return "red";
        case "生产中":
          return "green";
        case "生产失败":
          return "red";
        case "已完成":
          return "green";
        case "删除":
          return "gray";
        default:
          return "gray";
      }
    },
    // 图片提示过滤器
    imgTextFilter(data) {
      if (data.result && data.result.end_type) {
        switch (data.result.end_type) {
          case "end_no_photo":
            return "数据采集不完整，任务终止";
          case "end_no_photo":
            return "模型生产失败，任务终止";
        }
      }
      switch (data.state) {
        case "待审核":
          return "等待接单";
        case "审核中":
          return "审核中,等待结果";
        case "待执行":
          return "待执行";
        case "执行中":
          return "正在执行,等待结果";
        case "已挂起":
          return "已挂起";
        case "执行终止":
          return "执行终止";
        case "生产中":
          return "生产中,等待结果";
        case "生产失败":
          return "生产失败";
        case "已完成":
          return "已完成";
        case "删除":
          return "删除";
        default:
          return "无图片";
      }
    },
    // 时间过滤器
    timeFilter(time) {
      if (!!time) {
        return moment(time).format("MM-DD HH:mm:ss");
      } else {
        return "暂无数据";
      }
    },
  },
  props: {
    ticketSelect: {
      default() {
        return {};
      },
    },
    workData: {
      default() {
        return "";
      },
    },
  },
  components: {},
  data() {
    return {
      ifDelWork: false,
      state: "",
    };
  },
  mounted() {
    this.state = this.workData.state;
  },
  methods: {
    urlAddToken(url) {
      return addUrlToken(url);
    },
    // 删除
    delWork() {
      // console.log("del", this.workData);
      this.ifDelWork = false;
      if (this.workData.state === "待审核") {
        delTicket({ ticket_id: this.workData.ticket_id }).then((res) => {
          if (res.msg === "ok") {
            this.$message.success("删除成功");
            this.$parent.getTicketList();
          } else {
            this.$message.warning(res.msg);
          }
        });
      }
    },
    //
    showPopover() {
      setTimeout(() => {
        this.ifDelWork = false;
      }, 3000);
    },
  },
  computed: {},
  watch: {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
$color1: #18abf3;
.workActive {
  border: 2px solid $color1 !important;
  border-radius: 5px;
}
.works {
  width: 300px;
  height: 110px;
  margin-bottom: 5px;
  background-color: #ffffff30;
  display: flex;
  border: 2px solid transparent;
  border-radius: 5px;
  &:hover {
    border: 2px solid #d1f72c;
    border-radius: 5px;
    cursor: pointer;
  }
  .work_left {
    position: relative;
    height: 100%;
    width: 130px;
    background-color: #ffffff50;
    border-radius: 5px;

    .work_left_img {
      width: 100%;
      height: 100%;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      .workImg {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .workText {
        padding: 0 15px;
      }
    }
    .work_left_text {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 20px;
      background-color: #00000090;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .distance_svg_icon {
        font-size: 12px;
        margin-right: 2px;
      }
      .work_left_text_left {
        font-size: 12px;
      }
      .work_left_text_right {
        font-size: 12px;
      }
    }
    .work_left_del {
      position: absolute;
      top: 0px;
      left: 0px;
      cursor: pointer;
      .background {
        position: absolute;
        top: 0px;
        left: 0px;
        border: 40px solid #333333ee;
        // border-color: #333333ee #f00 #0f0 #00f;
        border-left-color: #333333ee;
        border-right: 0;
        border-top: 0;
        border-bottom-color: #00000000;
      }
      .text {
        position: absolute;
        top: 3px;
        left: 3px;
        font-size: 15px;
      }
    }
  }
  .work_right {
    flex: 1;
    padding: 5px;
    padding-right: 0;
    text-align-last: left;
    height: 100%;
    font-size: 12px;
    .work_right_title {
      font-size: 13.5px;
      color: $color1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title_name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 95px;
      }
      .title_tag {
        font-size: 12px;
        background-color: #b5b5b5;
        padding: 3px 8px 2px 8px;
        border-radius: 10px;
        color: #ffffff;
        &.red {
          background-color: #d9001b;
        }

        &.green {
          background-color: #70b603;
        }
        &.yellow {
          background-color: #d4b801;
        }
        &.orange {
          background-color: orange;
        }
        &.blue {
          background-color: #02a7f0;
        }
        &.gray {
          background-color: #b5b5b5;
          z-index: 999;
        }
      }
    }
    hr {
      background-color: $color1;
      height: 1px;
      border: none;
    }
    .work_right_body {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 75px;
      .work_text {
        span {
          display: inline-block;
          max-width: 150px;
          white-space: nowrap; // 强制不换行
          overflow: hidden; // 文本溢出隐藏
          text-overflow: ellipsis; // 省略号
          b {
            margin-right: 24px;
          }
        }
      }
    }
  }
}
</style>
